<template>
    <div class="question" v-if="packetQues">
        <page-title :title="packetQues.title"></page-title>
        <swiper v-if="packetQues.content && packetQues.content.quesRelatedImg" :aspect-ratio="1/4" :show-dots="false" loop auto class="cl-swiper">
            <img :src="packetQues.content.quesRelatedImg">
        </swiper>
        <article class="article">
            <div class="dt-header">
                <h2>{{packetQues.title}}</h2>
                <p class="dt-info">
                    <span class="date">
                        <span>{{packetQues.create_time}}</span>
                    </span>
                </p>
            </div>
            <div class="rich-ctx" style="margin-bottom:1rem;" v-html="packetQues.rich_ctx">
            </div>

            <p class="time">调查问卷截止时间：
                <span>{{data.end_time}}</span>
            </p>
            <p v-if="nowDate > +new Date(data.end_time)" class="count-down count-down-end">
                活动已经结束，欢迎下次参加！
            </p>
            <p v-else class="count-down">
                <span> 距离活动结束时间：</span>
                <clocker :time="+new Date(data.end_time)"></clocker>
            </p>
        </article>
        <div class="wrap personal">

            <div v-if="nowDate < +new Date(data.end_time)" class="form-item ques-box two-line" v-for="(item,index) in content" :key="index">
                <p class="ques-title">
                    <b class="index">{{index+1}}.</b> {{item.title}}
                    <i v-if="item.must==1" class="must">*</i>
                </p>
                <checklist class="a" v-if="item.type==0" :max="1" :options="item.questionDesc" v-model="item.value" @on-change="change"></checklist>
                <checklist class="a" v-if="item.type==1" :options="item.questionDesc" v-model="item.value" @on-change="change"></checklist>
                <x-textarea class="a" v-if="item.type==2" :max="200" :rows="3" v-model="item.value"></x-textarea>
            </div>

            <x-button type="primary" :show-loading="showLoading" v-if="state==true" disabled>您已提交</x-button>
            <x-button type="primary" :show-loading="showLoading" @click.native="submit" v-else>提交</x-button>
        </div>
    </div>
</template>

<script>
import { Clocker, Checklist, XTextarea, XButton, Swiper } from 'vux'
import { getQuestionById, saveQuestionnaireReceipt, getQuestionReceiptByUserIdAndQId } from '@/api/community'
import { getEnterpriseInfo } from "@/api/enterprise"
import { getPacketById } from '@/api/packet'
export default {
    data() {
        return {
            questionnaireId: this.$route.query.id,
            //获取活动id
            activityId: null,
            eid: this.$route.query.eid,
            //分享者ID
            shareUserId: this.$route.query.shareUserId,
            showLoading: false,
            nowDate: +new Date(),
            data: {
                name: '',
                release_time: '',
                description: '',
                creator: '',
                // 微信只能支持 yyyy/mm/dd hh:mm:ss
                end_time: null,
            },
            content: null,
            //用来保存最终问题和答案
            finalDatas: [],
            //用来判断是否做过调查问卷
            state: null,
            //资料包名称
            packetQues: null,
        }
    },
    components: {
        Swiper,
        Clocker,
        Checklist,
        XTextarea,
        XButton
    },
    mounted() {
    },
    methods: {
        change(val, label) {
            // console.log('change', val, label)
        },
        //保存
        submit() {
            this.showLoading = true
            for (var i = 0; i < this.content.length; i++) {
                var ele = this.content[i];
                if (this.content[i].value <= 0 && this.content[i].must == 1) {
                    this.$vux.toast.text('请回答必填项！', 'middle')
                    this.showLoading = false
                    return;
                }
                var a = {
                    id: ele.id,
                    ask: ele.title,
                    ans: ele.value,
                    score: ele.score,
                }
                this.finalDatas.push(a)
            }
            saveQuestionnaireReceipt(this.eid, this.questionnaireId, JSON.stringify(this.finalDatas), this.activityId).then(res => {
                this.$vux.toast.show('操作成功')
                this.showLoading = false
                this.state = true
            }).catch(_ => {
                this.showLoading = false
            })
        }
    },
     created() {
        getQuestionById(this.questionnaireId, this.eid).then(res => {
            this.activityId = res.questionnaire.activity_id
            if(res.questionnaire.end_time){
                res.questionnaire.end_time = res.questionnaire.end_time.replace(/-/g, '/')
            }
            this.data = res.questionnaire
            getPacketById(res.questionnaire.packet_id).then(async resp => {
                resp.packet.content = JSON.parse(resp.packet.content)
                resp.packet.content.question.forEach(function (ele) {
                    if (ele.questionDesc) {
                        ele.questionDesc = ele.questionDesc.split("\n")
                    }
                }, this);
                this.packetQues = resp.packet
                this.content = resp.packet.content.question
                //判断是否可以重复填写(1.可以 0.不可以)
                if (res.questionnaire.repeat == 0) {
                    //判断是否有值  如果有就证明用户已经答过
                    if (res.receipt) {
                        this.state = true
                        //将回答过的答案循环添加到初始答案中
                        JSON.parse(res.receipt.datas).forEach(function (ele, i) {
                            this.content[i].value = ele.ans
                        }, this);
                    }
                }
                //转发分享
                let share_thumburl = resp.packet.share_thumburl
                if (!share_thumburl) {
                    await getEnterpriseInfo().then(resc => {
                        share_thumburl = resc.enterprise.logo_1x1
                    });
                }
                // 获取微信分享参数
                // this.wxShare(this.questionnaireId, this.shareUserId, resp.packet.share_title ? resp.packet.share_title : res.questionnaire.name,
                //     resp.packet.share_remarks ? resp.packet.share_remarks : res.questionnaire.name, share_thumburl,
                //     (type) => {
                //         this.$vux.toast.text('分享成功')
                //     }, 5)
            }).catch(_ => {
                console.log("获取资料包报错")
            })
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
